<template>
  <div class="app-container">

    <el-radio-group v-model="listQuery.filterType" style="margin-bottom: 30px;">
      <el-radio-button label="0">时间倒叙</el-radio-button>
      <el-radio-button label="1">时间升序</el-radio-button>
      <el-radio-button label="6">忽略</el-radio-button>
    </el-radio-group>
    <div v-loading="loading" style="overflow-y: scroll;height:100%">
      <div v-if="total>0" class="auditing">
        <div class="auditing-box" v-for="(item,idx) in  list">

          <div class="left-info">
            <div class="title">
              <a :href="`https://wz.mala.cn/wz/wzinfo?wid=${item.wid}`" target="_blank"><i
                class="el-icon-link"
              ></i> {{ item.title }}</a>
            </div>
            <div class="sensitive" v-if="item.sensitive && item.sensitive.length>0">
              <span v-for="(v,i) in  item.sensitive">{{ v }}</span>
            </div>
            <el-descriptions class="margin-top" :column="3" border style="margin-top:5px;">
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  发帖人
                </template>
                {{ item.u_name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-time"></i>
                  时间
                </template>
                {{ item.create_time }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机
                </template>
                {{ item.phone }}
              </el-descriptions-item>


              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-time"></i>
                  ip
                </template>
                {{ item.ip }}
              </el-descriptions-item>

              <el-descriptions-item v-if="item.address">
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  精确地址
                </template>
                {{ item.address }}
              </el-descriptions-item>
            </el-descriptions>
            <div class="content" v-html="item.content" @dblclick="editorContent(idx,item.wid)"  v-if="!item.editorStatus" v-loading="item.queryloading"></div>
            <div class="" v-if="item.editorStatus">
              <el-input type="textarea" v-model="item.default_content" rows="6" style="margin-top:10px;"
              ></el-input>
              <el-popconfirm
                placement="top"
                title="留言修改将会直接生效，请问是否确认修改内容？"
                @confirm="handeleditContent(1,idx,item.wid)"
                @cancel="handeleditContent(2,idx,item.wid)"
              >
                <el-button slot="reference" type="primary" size="mini" style="margin-top: 10px">
                  确认修改
                </el-button>
              </el-popconfirm>
              <el-button slot="reference" @click="handeleditContent(2,idx,item.wid)" type="info" size="mini"
                         style="margin:10px 0 0 10px"
              >
                取消
              </el-button>
            </div>
            <div v-if="item.image && item.image.length>0">
              <div class="image__preview">
                <div class="img-item" v-for="(src,x) in item.image">
                  <el-image
                    class="imglist"
                    :src="src"
                    :preview-src-list="item.image"
                  >
                  </el-image>
                  <el-popconfirm title="确认删除这张图片吗？" placement="top" @confirm="deleteImg(item.wid,idx,x,src)">
                    <i class="el-icon-error" slot="reference"></i>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </div>
          <div class="right-action">

          </div>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂没有需要审核的内容"></el-empty>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
  </div>
</template>
<style lang="less" scoped>
.image__preview {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;

  .img-item {
    width: 100px;
    height: 100px;
    margin-right: 30px;
    margin-bottom:10px;
    position: relative;
  }

  .imglist {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }

  .el-icon-error {
    cursor: pointer;
    position: absolute;
    font-size: 30px;
    background: #fff;
    border-radius: 100%;
    top: -10px;
    right: -10px;
  }
}

.auditing {
  width: 100%;

  &-box {
    border: 1px solid #eee;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 1300px;

    .left-info {
      width: 900px;
      padding: 20px;
      border-right: 1px solid #eee;

      .title a {
        color: #409EFF;
        font-weight: bold;
        font-size: 16px;

        &:hover {
          color: #369;
        }
      }

      .content {
        line-height: 25px;
        font-size: 12px;
        color: #666;
        background: #eee;
        padding: 10px;
        margin-top: 5px;
        border-radius: 5px;
      }

      .sensitive {
        color: #999;
        margin-top: 5px;

        > span {
          margin-right: 10px;
          font-size: 12px;
          color: red;
        }
      }
    }

    .right-action {
      width: 400px;
    }
  }
}
</style>
<script>
import { getAuditing,shenheAction } from '@/api/sh'
import Pagination from '@/components/Pagination'
import { updateWzinfo, updateWzinfoParms } from '@/api/wz'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      loading: true,
      listQuery: {
        page: 1,
        filterType: 6,
        limit: 20
      },
      loadingField: {}
    }
  },
  watch: {
    'listQuery.filterType': function(a, b) {
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  },

  methods: {
    handeleditContent(type,i,wid){
      if(type==2){
        this.$set(this.list[i],'editorStatus',false)
      }else{
        this.$set(this.list[i],'editorStatus',false)
        this.$set(this.list[i],'queryloading',true)
        updateWzinfo({ wid: wid, content: this.list[i].default_content }).then(r => {
          this.list[i].editorStatus = false
          this.list[i].content = this.list[i].default_content.replace(/\n/g, '<br />')
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.$set(this.list[i],'queryloading',false)
        }, data => {
          this.$set(this.list[i],'editorStatus',false)
        })
      }
    },
    editorContent(i,wid){
      // this.list[i].editorStatus = true
      this.$set(this.list[i],'editorStatus',true)
    },
    deleteImg(wid, idx, x, src) {
      shenheAction({ wid:wid, action: 'deleteimg', idx: x, src: src }).then(r => {
        this.list[idx].image.splice(x, 1)
      }, data => {
      })
    },
    refresh() {
      this.fetchData()
    },
    fetchData() {
      this.loading = true
      this.list = []
      getAuditing(this.listQuery).then(response => {
        this.loading = false
        this.list = response.data.data
        this.total = response.data.total
      })
    }
  }
}
</script>
